<template>
  <el-dialog
    width="720px"
    title="分时段调价"
    :visible="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :show-close="!okBtnLoading"
    @open="onOpen"
    @close="onClose"
  >
    <div v-if="visible" :class="$style.body">
      <el-form>
        <el-form-item label-width="80px" label="顶级渠道">
          <el-select v-model="formValue.topChannelCode" placeholder="请选择" clearable>
            <el-option v-for="item in topChannelList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          label-width="80px"
          :error="task.errMsg"
          :show-message="task.showErrMsg"
          v-for="(task, index) in taskList"
          :key="task.id"
          :label="index === 0 ? '调价时段' : ' '"
        >
          <div :class="$style.rangeItemContent">
            <el-time-picker v-model="task.startTime" value-format="HH:mm" format="HH:mm" placeholder="开始时间" />
            <span style="padding: 0 8px;">至</span>
            <el-time-picker v-model="task.endTime" value-format="HH:mm" format="HH:mm" placeholder="结束时间" />
            <el-upload
              :ref="`uploadRef-${task.id}`"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :limit="1"
              :auto-upload="false"
              :file-list="task.fileList"
              :show-file-list="false"
              accept=".xlsx"
              :on-change="
                e => {
                  onUploadChange(task, e);
                }
              "
              :on-exceed="
                e => {
                  onUploadChange(task, e, true);
                }
              "
            >
              <div style="margin: 0 8px;">
                <el-tooltip
                  v-if="task.fileList && task.fileList.length > 0"
                  class="item"
                  effect="dark"
                  :content="task.fileList[0].name"
                  placement="top-end"
                >
                  <el-button @lick="onTest(task)" v-if="task.fileList && task.fileList.length > 0" size="small" type="success">重新上传</el-button>
                </el-tooltip>
                <el-button v-else size="small">点击上传</el-button>
              </div>
            </el-upload>
            <el-button @click="onAddTimeRange" size="small" type="primary" icon="el-icon-plus" circle />
            <el-button @click="onRemoveTimeRange(task)" :disabled="index === 0" size="small" type="danger" icon="el-icon-minus" circle />
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" :class="$style.footer">
      <el-button :loading="okBtnLoading" type="primary" @click="onOK">保 存</el-button>
    </div>
  </el-dialog>
</template>

<style lang="scss" module>
@import '~@/assets/style/core/index.scss';

.body {
  max-height: 45vh;
  overflow: auto;
}

.rangeItemContent {
  display: flex;
  align-items: center;
  padding-right: 8px;
}

.footer {
  display: flex;
  justify-content: center;
}
</style>

<script>
import Index from './index';
export default Index;
</script>
